<template>
  <div class="app-container">
    <div class="form-container">
      <el-form :model="interfaceModel" label-width="100px">
        <el-row>
          <el-col :span="12">
            <el-form-item label="账号" prop="account">
              <el-input v-model="interfaceModel.account" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="密码" prop="password">
              <el-input v-model="interfaceModel.password" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="网关ip" prop="gateway_ip">
              <el-input v-model="interfaceModel.gateway_ip" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="提供者" prop="provider">
              <el-input v-model="interfaceModel.provider" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="接收端口" prop="receive_port">
              <el-input v-model="interfaceModel.receive_port" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="发送端口" prop="send_port">
              <el-input v-model="interfaceModel.send_port" placeholder="请输入" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="是否可用" prop="enabled">
              <el-tag :type="interfaceModel.enabled ? 'success' : 'danger'">
                {{ interfaceModel.enabled ? '可用' : '不可用' }}
              </el-tag>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="op">
        <el-button type="primary" @click="save">保存</el-button>
        <!-- <el-button type="danger" @click="getTaskResult">查询短信任务结果</el-button> -->
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import ConfigAPI from '@/api/message/config.api';

interface ConfigInterface {
  account?: string;
  password?: string;
  gateway_ip?: string;
  provider?: string;
  receive_port?: string;
  send_port?: string;
  enabled?: boolean;
}
const loading = ref(false);
const interfaceModel = ref<ConfigInterface>({
  account: '',
  password: '',
  gateway_ip: '',
  provider: '',
  receive_port: '',
  send_port: '',
  enabled: true
});

const getInterfaceList = () => {
  ConfigAPI.getInterface().then((data: any) => {
    Object.assign(interfaceModel.value, data);
    // interfaceModel.value = data;
  }).catch((err) => {
    
  });
}

const save = () => {
  ConfigAPI.updateInterface(interfaceModel.value).then((data: any) => {
    ElMessage({
      message: '保存成功',
      type: 'success',
    });
  }).catch((err) => {
    ElMessage({
      message: '保存失败',
      type: 'error',
    });
  });
}

// const getTaskResult = () => {
//   ConfigAPI.getTaskResult().then((data: any) => {

//   }).catch((err) => {
//     ElMessage({
//       message: '查询失败',
//       type: 'error',
//     });
//   });
// }

onMounted(() => {
  getInterfaceList();
});
</script>

<style lang="scss" scoped>
.form-container{
  padding: 10px 20px;
}
.op{
  padding: 10px 20px;
  display: flex;
  justify-content: flex-end;
}
</style>